<script src="../../main.js"></script>
<template>
  <div class="listbox">
    <!--    <headerTitle>新年许愿池WishingFountain</headerTitle>-->
    <div class="listItem">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" immediate-check="false">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <item @refresh="refresh" v-if="itemList" :itemList="itemList"></item>
        </van-list>
      </van-pull-refresh>
      <div class="pushListBox">
        <div class="pushList" @click="pushList">
          +
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import headerTitle from "@/components/headerTitle";
import item from "@/views/list/comonent/item";
import {getListUrl} from "@/api/list";
import {activitytime, myConstants} from "@/utils/activitytime";

export default {
  name: "list",
  components: {
    headerTitle,
    item
  },
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      isLoading: false,
      page: {
        pageSize: "10",
        pageNum: "1"
      },
      itemList: [],
      key: 1,
      ifReed: true,
      refreshType: ""
    };
  },
  mounted() {
    this.$store.commit("changeaudioUrl", this.$route.query.type);
    if (this.$route.query.type == "3") {
      let now = new Date().getTime();
      // 2023-01-09 23:59:59 以后,变为塔塔画展
      if (now > this.getRealTime(activitytime.xiaota)) {
        document.title = "塔塔画展 Exhibition";
      } else {
        document.title = "共绘小塔 Panting acitivty";
      }
    }

  },
  methods: {
    getRealTime(time) {
      let realTime = time.replace(/-/g, '/')
      return new Date(realTime).getTime();
    },
    onRefresh() {
      console.log("onRefresh...")
      this.loading = true;
      //重置
      this.page.pageNum = 1;
      this.pageSize = 10;
      this.getList(true);
    },
    getList(refresh) {
      let params = {
        ...this.page,
        type: this.$route.query.type
      };

      getListUrl(params).then(res => {
        let rows = res.data.list; //请求返回当页的列表
        console.log(rows[6].content);
        // console.log(rows[7].content);
        this.loading = false;
        setTimeout(() => {
          this.refreshing = false;
        }, 1000);
        this.total = res.data.total;

        if (rows == null || rows.length === 0) {
          // 加载结束
          this.finished = true;
          return;
        }
        if (refresh) {
          this.itemList = [];
          this.finished = false;
        }
        // 将新数据与老数据进行合并
        this.itemList = this.itemList.concat(rows);
        //如果列表数据条数>=总条数，不再触发滚动加载
        if (this.itemList.length >= this.total) {
          this.finished = true;
        }
      });
    },

    //滚动加载时触发，list组件定义的方法
    onLoad() {
      this.getList(false);
      //if (this.refreshType == "refresh") {
      this.page.pageNum++;
      // }
      console.log("onLoad...")
    },


    refresh(data) {
      if (data.type === 'delete') {
        let id = data.content;
        console.log("delete id=" + id);
        //从itemlist中移动
        this.deleteFromItemList(id);
        this.$forceUpdate();
      } else {
        this.refreshType = data;
        this.getList(false);
      }
    },
    deleteFromItemList(id) {
      let list = this.itemList;
      let index = -1;
      if (list != null && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.id === id) {
            index = i;
            list.splice(index, 1)
            break;
          }
        }
      }
    },
    pushList() {
      this.clickAudio();
      let _this = this;
      setTimeout(function () {
        _this.$router.push({path: "/activityFlowPushList", query: {type: _this.$route.query.type}});
      }, myConstants.delay)
    }
  }
};
</script>

<style scoped lang="scss">
.listbox {
  height: 100%;

  .listItem {
    height: calc(100% - 80px);
    overflow-y: scroll;

    .van-col {
      height: 260px;
      //border: 1px solid red;
      //background: red ;
    }
  }

  .pushListBox {
    .pushList {
      position: absolute;
      bottom: 30px;
      left: 50%;
      margin-left: -23px;
      width: 49px;
      height: 50px;
      background: linear-gradient(180deg, #FFFFFF 0%, #DEA2FC 100%);
      opacity: 1;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      font-size: 50px;
      //font-weight: bold;
      //font-weight: 100;
    }
  }


}
</style>
